<template>
  <div class="news-container">
    <!-- 主标题和查看更多 -->
    <div class="section-header">
      <h2 class="section-title">
        <el-icon><ChatDotRound /></el-icon>
        校园资讯
      </h2>
      <router-link to="/news" class="section-more">
        查看更多<el-icon><ArrowRight /></el-icon>
      </router-link>
    </div>
    
    <!-- 资讯列表 -->
    <div class="news-grid">
      <!-- 主资讯 (1/2宽度) -->
      <div 
        v-if="newsList.length > 0" 
        class="news-item main-news"
        :style="{ backgroundImage: `url(${newsList[0].image || defaultImage})` }"
        @click="handleNewsClick(newsList[0])"
      >
        <div class="news-overlay"></div>
        <div class="news-content">
          <h3 class="news-title">{{ newsList[0].title }}</h3>
          <p class="news-excerpt">{{ truncateText(newsList[0].content, 150) }}</p>
          <div class="news-meta">
            <span class="news-author">{{ newsList[0].author }}</span>
            <span class="news-time">{{ formatTime(newsList[0].createTime) }}</span>
          </div>
        </div>
      </div>
      
      <!-- 右侧资讯区 (1/2宽度) -->
      <div class="secondary-news" v-if="newsList.length > 1">
        <!-- 上半部分 (1/2高度) -->
        <div 
          class="news-item secondary-top"
          :style="{ backgroundImage: `url(${newsList[1].image || defaultImage})` }"
          @click="handleNewsClick(newsList[1])"
        >
          <div class="news-overlay"></div>
          <div class="news-content">
            <h3 class="news-title">{{ newsList[1].title }}</h3>
            <p class="news-excerpt">{{ truncateText(newsList[1].content, 80) }}</p>
            <div class="news-meta">
              <span class="news-author">{{ newsList[1].author }}</span>
              <span class="news-time">{{ formatTime(newsList[1].createTime) }}</span>
            </div>
          </div>
        </div>
        
        <!-- 下半部分 (1/2高度) - 分成两个1/4 -->
        <div class="bottom-row" v-if="newsList.length > 2">
          <div 
            class="news-item quarter-news"
            :style="{ backgroundImage: `url(${newsList[2].image || defaultImage})` }"
            @click="handleNewsClick(newsList[2])"
          >
            <div class="news-overlay"></div>
            <div class="news-content">
              <h3 class="news-title">{{ newsList[2].title }}</h3>
              <div class="news-meta">
                <span class="news-time">{{ formatTime(newsList[2].createTime) }}</span>
              </div>
            </div>
          </div>
          
          <div 
            class="news-item quarter-news"
            v-if="newsList.length > 3"
            :style="{ backgroundImage: `url(${newsList[3].image || defaultImage})` }"
            @click="handleNewsClick(newsList[3])"
          >
            <div class="news-overlay"></div>
            <div class="news-content">
              <h3 class="news-title">{{ newsList[3].title }}</h3>
              <div class="news-meta">
                <span class="news-time">{{ formatTime(newsList[3].createTime) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ChatDotRound, ArrowRight } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const router = useRouter()

// 默认图片
const defaultImage = 'https://agoni-web.oss-cn-beijing.aliyuncs.com/default-news-bg.jpg'

// 校园资讯数据
const newsList = ref([
  {
    id: 1,
    title: '2023年度校园科技文化节即将开幕',
    content: '第十五届校园科技文化节将于下月举行，本次文化节将涵盖科技创新、艺术展示、学术交流等多个领域。活动期间将举办50余场专题讲座、20项科技竞赛和10场文艺演出，预计参与师生超过5000人。欢迎全校师生积极参与，共同打造校园文化盛宴。',
    author: '校团委',
    createTime: '2023-05-20 10:00:00',
    image: 'https://p3.hippopx.com/preview/736/427/landscape-rocks-%C4%A2ory-array-look-the-foot-of-the-alps-rock-perspective-overlap-mountain.jpg'
  },
  {
    id: 2,
    title: '2023年度校园运动会报名开始',
    content: '一年一度的校园运动会将于11月25日在学校体育场举行。本届运动会新增了3个比赛项目，包括电子竞技表演赛、攀岩挑战赛和无人机竞速赛。报名通道已开启，各院系可组织学生通过学校官网或体育部APP进行报名。参赛选手需提前进行体检，确保身体状况符合比赛要求。',
    author: '体育教学部',
    createTime: '2023-05-15 12:00:00',
    image: 'https://p3.hippopx.com/preview/41/115/lake-mountains-nature-travel-exploration-outdoors-fog-thumbnail.jpg'
  },
  {
    id: 3,
    title: '图书馆新增电子资源数据库',
    content: '为满足师生科研学习需求，图书馆最新引进了IEEE Xplore、Springer Nature等5个国际知名学术资源数据库，涵盖工程、计算机、生命科学等多个学科领域。',
    author: '图书馆',
    createTime: '2023-05-10 09:30:00',
    image: 'https://p0.hippopx.com/preview/423/846/431/america-american-architecture-capital-royalty-free-thumbnail.jpg'
  },
  {
    id: 4,
    title: '校园食堂满意度调查结果公布',
    content: '2023年春季学期校园食堂满意度调查结果已公布，总体满意度达到92%，较上学期提升5个百分点。',
    author: '后勤管理处',
    createTime: '2023-05-05 14:15:00',
    image: 'https://p1.hippopx.com/preview/667/688/906/nature-field-grass-leaves-royalty-free-thumbnail.jpg'
  }
])

// 格式化时间
const formatTime = (timeStr: string) => {
  return dayjs(timeStr).format('YYYY-MM-DD')
}

// 截断文本
const truncateText = (text: string, length: number) => {
  if (!text) return ''
  return text.length > length ? text.substring(0, length) + '...' : text
}

// 处理资讯点击
const handleNewsClick = (news: any) => {
  router.push(`/news/detail/${news.id}`)
}
</script>

<style scoped>
.news-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0 40px;
}

/* 新增标题栏样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  color: #333;
  margin: 0;
}

.section-title .el-icon {
  margin-right: 10px;
  font-size: 28px;
  color: #409eff;
}

.section-more {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  transition: all 0.3s;
}

.section-more:hover {
  color: var(--el-color-primary);
}

.section-more .el-icon {
  margin-left: 5px;
  font-size: 14px;
}

/* 原有样式保持不变 */
.news-grid {
  display: flex;
  gap: 20px;
  height: 500px;
}

.news-item {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.news-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.news-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
}

.news-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  color: white;
  z-index: 1;
}

.news-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.news-excerpt {
  margin: 0 0 15px;
  font-size: 16px;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.news-meta {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.news-author {
  margin-right: 15px;
}

.news-time {
  opacity: 0.9;
}

.main-news {
  flex: 1;
  height: 100%;
}

.secondary-news {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.secondary-top {
  height: calc(50% - 10px);
}

.bottom-row {
  height: calc(50% - 10px);
  display: flex;
  gap: 20px;
}

.quarter-news {
  flex: 1;
  height: 100%;
}

@media (max-width: 768px) {
  .news-grid {
    flex-direction: column;
    height: auto;
  }
  
  .main-news,
  .secondary-news {
    flex: none;
    height: 300px;
  }
  
  .bottom-row {
    height: 200px;
  }
}
</style>